<template>
  <div class='kz-cont' v-show='showstate'>
    <div class='kz-wrapper' >
      <div class='kz-text'>
        <strong><slot name='text' >{{title}}</slot></strong>
      </div>
      <div class='footer'>
        <div  class='kz-btn'>
			<a class="weui-cell " v-for="(value,key,index) in showObject">
				<div class="weui-cell__bd" style="display: inline-flex;">
					<span class="demo_badge_title fl" >{{titles[key]}}</span>
				</div>
				<div class="weui-cell__ft weui-cells__tips" >{{value}}</div>
			</a>
			<a @click='closeDetail' class="weui-btn_mini weui-btn_default">关闭</a>
		</div>
        <!-- <div class='kz-btn' @click='took'>确定</div> -->
      </div>
    </div>
  </div>
</template>
<script>
  export default{
    name:'showCaseDetailMsg',
    props: {
      showstate: {
        type: Boolean,
        default: false
      },
      showObject: { 
        type: Object,
        deault: {}
      },
	  title:{
		  type:String,
		  default:"信息"
	  }
    },
	data() {
		return {
			titles:{
				caseName:"课程名称",
				caseType:"课程类别",
				caseDesc:"课程描述",
				caseStartTime:'课程开始时间',
				caseEndTime:'课程结束时间',
				dealName:'课程状态',
				accountName:"老师姓名",
				telePhone:"老师电话",
				
			},
			imgPath:"",//缓存当期图片路径
		}
	},
    methods:{
      tocancel:function(){
        this.$parent.cancle();
      },

    },
	created() {
		
	},
	methods:{
		// 深度克隆
		deepClone (obj) {  
		if(typeof obj !== "object" && typeof obj !== 'function') {
		    return obj;        //原始类型直接返回
		}
		var o = this.isArray(obj) ? [] : {}; 
		for(var i in obj) {  
		    if(obj.hasOwnProperty(i)){ 
		        o[i] = typeof obj[i] === "object" ? this.deepClone(obj[i]) : obj[i]; 
		    } 
		} 
		return o;
		},
		dealObj(){
			this.imgPath = this.showObject['caseImgPath']
			this.$delete(this.showObject,"caseImgPath")
		},
		closeDetail(){
			this.showObject["caseImgPath"] = this.imgPath;
			this.$parent.cancle();
		}
	},
	watch:{
	    showObject:function(newVal, oldVal){
	        if (newVal != oldVal) {
	        
	        	this.dealObj();
	        }
	    }
	}
  }
</script>
<style scoped>
  .kz-cont{
	  width: 100%;
	  height: 100%;
	  position:fixed;
	  left:0;right: 0;
	  top:0;bottom: 0;z-index: 500;
	  background:rgba(0,0,0,0.3);
	  text-align:center;
	  overflow: hidden;
	  white-space:nowrap;}
  .kz-cont:after{content:"";display:inline-block;width:0;height:100%;visibility: hidden;vertical-align:middle;}
  .kz-wrapper{height: 90%;width: 90%;overflow: auto; display:inline-block;vertical-align:middle;background:#fff;color:#333333;border-radius: 5px;max-width:100%;}
  .kz-text{text-align:center;padding:0.8375rem 4.6875rem;}
  .footer{display:flex;border-top:1px solid #E5E5E5; }
  .kz-btn{flex:1;padding: 12px;color:#488BF1;}
  .kz-btn +.kz-btn{border-left:1px solid #E5E5E5;}
  fl{
	  display: grid;
  }
</style>